<template>
  <div class="workflow-demo-container">
    <div class="canvas-root"></div>
  </div>
</template>
<script setup lang="ts">
import LogicFlow from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";
import { DndPanel, SelectionSelect } from "@logicflow/extension";
import { onMounted } from "vue";

LogicFlow.use(DndPanel);
LogicFlow.use(SelectionSelect);

const renderData = {
  // 节点数据
  nodes: [
    {
      id: "21", // 节点ID，需要全局唯一，不传入内部会自动生成一个ID
      type: "rect", // 节点类型，可以传入LogicFlow内置的7种节点类型，也可以注册自定义节点后传入自定义类型
      x: 100, // 节点形状中心在x轴位置
      y: 100, // 节点形状中心在y轴的位置
      text: "Origin Usage-rect", // 节点文本
      properties: {
        // 自定义属性，用于存储需要这个节点携带的信息，可以传入宽高以重设节点的宽高
        width: 160,
        height: 80,
      },
    },
    {
      id: "50",
      type: "circle",
      x: 300,
      y: 300,
      text: "Origin Usage-circle",
      properties: {
        r: 60,
      },
    },
  ],
  // 边数据
  edges: [
    {
      id: "rect-2-circle", // 边ID，性质与节点ID一样
      type: "polyline", // 边类型
      sourceNodeId: "50", // 起始节点Id
      targetNodeId: "21", // 目标节点Id
    },
  ],
};

const initCanvas = () => {
  const lf = new LogicFlow({
    container: document.querySelector(".canvas-root") as HTMLElement,
    keyboard: {
      enabled: true,
    },
  });

  lf.extension.dndPanel.setPatternItems([
    {
      type: "diamond",
      label: "钻石",
    },
    {
      type: "rect",
      label: "用户任务",
    },
  ]);

  lf.render(renderData);

  lf.on("node:dnd-add", (node) => {
    console.log("当前画布配置：", lf.getGraphData());
  });

  lf.on("edge:dnd-add", (edge) => {
    console.log("当前画布配置：", lf.getGraphData());
  });

  lf.on("node:delete", (node) => {
    console.log("当前画布配置：", lf.getGraphData());
  });

  lf.on("edge:delete", (edge) => {
    console.log("当前画布配置：", lf.getGraphData());
  });
};

onMounted(() => {
  initCanvas();
});
</script>

<style scoped lang="scss">
.workflow-demo-container {
  height: 100%;
  background-color: #f0f0f0;
  .canvas-root {
    height: 100%;
  }
}
</style>
